<template>
    <view class="taskDetails">
        <uni-nav-bar fixed left-icon="left" title="订单详情" @clickLeft="backHandle" class="unibarS">
            <!-- <block slot="right">
                <text class="sub-btn" @click="">新建回款</text>
            </block> -->
        </uni-nav-bar>
        <!-- 主要内容 -->
        <view class="taskDetails-content">
            <!-- 任务信息 -->
            <view class="customer-info">
                <uni-row class="demo-uni-row" style="text-align: center;">
                    <uni-col :span="12">
                        <view class="item">
                            <view>订单编号</view>
                            <view>{{ detailsData.orderNumber }}</view>
                        </view>
                    </uni-col>
                    <uni-col :span="12">
                        <view class="item">
                            <view>审批状态</view>
                            <view :style="{ color: getColor(detailsData.orderStatus) }">{{ bus_order_status[detailsData.orderStatus] }}</view>
                        </view>
                    </uni-col>
                </uni-row>
            </view>
            <!-- 切换tab -->
            <view class="tab">
                <view v-for="item in tabList" :key="item.type" :class="{ active: tabIndex == item.type }"
                    @click="clickTabs(item)">
                    {{ item.label }}
                </view>
            </view>
            <view v-if="tabIndex == 1" class="info-c">
                <view class="order_info">
                    <view class="order_info_top">
                        <view class="order_info_left">
                            <view><text>订单金额: </text><text>¥{{ detailsData.orderTotalAmount }}</text></view>
                            <view><text>已付款金额：</text><text>¥{{ detailsData.yifukuan }}</text></view>
                            <view><text>回款金额： </text><text>¥{{ detailsData.receivedAmount }}</text></view>
                            <view><text>差额：</text><text>¥{{ detailsData.differenceAmount }}</text></view>
                            <view><text>付款类型：</text><text>{{ bus_pay_type_list[detailsData.paymentType] }}</text></view>
                            <view><text>支付方式：</text><text>{{ bus_pay_status[detailsData.paymentMethod] }}</text></view>
                            <view><text>付款截图：</text>
                                <view v-if="detailsData.paymentUrl">
                                    <image
                                        style="width: 200rpx; height: 264rpx; margin-right: 20rpx;"
                                        v-for="(item, index) in detailsData.paymentUrl" :key="index"
                                        :src="item" mode="aspectFill" @click="previewImg(index)">
                                    </image>
                                </view>
                                <text v-else>无</text>
                            </view>
                        </view>
                        <view class="order_info_right">
                            <view style="display: flex; flex-direction: column; align-items: center;">
                                <view v-if="detailsData.isGrossProfitMarginShow" style="margin-bottom: 50rpx; color: #FF001C; font-size: 28rpx;">毛利率: {{ detailsData.orderGrossProfitRate }}%</view>
                                <u-avatar :src="'/static/img/dd.png'"></u-avatar>
                                <view class="salesman">{{ detailsData.businessManager }}</view>
                            </view>
                        </view>
                    </view>
                    <view class="order_info_remark">
                        <view><text>收款备注：</text><text>{{ detailsData.remark || '---' }}</text></view>
                    </view>
                </view>
                <view class="order_info">
                    <view class="order_info_top">
                        <view class="order_info_left">
                            <view><text>客户姓名：</text><text>{{ detailsData.customerName }}</text></view>
                            <view><text>客户手机号：</text><text>{{ detailsData.customerPhone }}</text></view>
                            <view><text>客户类型：</text><text>{{ bus_client_type[detailsData.customerType] }}</text></view>
                            <view><text>收货人：</text><text>{{ detailsData.recipient }}</text></view>
                            <view><text>收货人电话：</text><text>{{ detailsData.recipientPhone }}</text></view>
                            <view><text>收货地址：</text><text>{{ detailsData.shippingAddress }}</text></view>
                            <view style="margin-bottom: 0;"><text>发货备注：</text><text>{{ detailsData.deliverGoodsRemark }}</text></view>
                        </view>
                    </view>
                </view>
                <!-- 商品信息 -->
                 <view v-if="goodsList.length" class="order_goods">
                    <view class="title_box">
                        <view></view>
                        <view>商品信息</view>
                    </view>
                    <view v-for="(item, index) in goodsList" :key="index" class="goods_item" style="display: flex;">
                        <view class="order_info_left">
                            <view><text>商品名称：</text><text>{{ item.commodityName }}</text></view>
                            <view><text>商品ID：</text><text>{{ item.commodityCode }}</text></view>
                            <view><text>最小数量：</text><text>{{ item.quantity }}</text></view>
                            <view><text>单价：</text><text>{{ item.factoryPrice }}</text></view>
                            <view><text>拆箱价：</text><text>{{ item.onlineUnitPrice}}</text></view>
                            <view><text>销售价格：</text><text>{{ item.unitPrice }}</text></view>
                            <view><text>箱数量：</text><text>{{ item.numberOfShippingBoxes }}</text></view>
                            <view><text>箱价：</text><text>{{ item.caseUnitPrice }}</text></view>
                            <view><text>提成率：</text><text>{{ item.commissionRatio }}</text></view>
                            <view style="margin-bottom: 0;"><text>小计：</text><text>{{ item.subtotal }}</text></view>
                        </view>
                    </view>
                 </view>
                <!-- 赠品信息 -->
                 <view  v-if="giftList.length" class="order_goods">
                    <view class="title_box">
                        <view></view>
                        <view>赠品信息</view>
                    </view>
                    <view v-for="(item, index) in giftList" :key="index" class="goods_item" style="display: flex;">
                        <view class="order_info_left">
                            <view><text>商品名称：</text><text>{{ item.commodityName }}</text></view>
                            <view><text>商品ID：</text><text>{{ item.commodityCode }}</text></view>
                            <view><text>最小数量：</text><text>{{ item.quantity }}</text></view>
                            <view><text>单价：</text><text>{{ item.factoryPrice }}</text></view>
                            <view><text>拆箱价：</text><text>{{ item.onlineUnitPrice}}</text></view>
                            <view><text>销售价格：</text><text>{{ item.unitPrice }}</text></view>
                            <view><text>箱数量：</text><text>{{ item.numberOfShippingBoxes }}</text></view>
                            <view><text>箱价：</text><text>{{ item.caseUnitPrice }}</text></view>
                            <view><text>提成率：</text><text>{{ item.commissionRatio }}</text></view>
                            <view style="margin-bottom: 0;"><text>小计：</text><text>{{ item.subtotal }}</text></view>
                        </view>
                    </view>
                 </view>
            </view>
            <!-- 回款信息 -->
            <view v-show="tabIndex == 2">
                <Payment ref="payment"></Payment>
            </view>
            <view v-if="tabIndex == 3" style="padding: 32rpx 28rpx; background-color: white;">
                <view class="steps_number">审批编号：{{ processInstanceBizCode }}</view>
                <u-steps dot direction="column">
                    <u-steps-item v-for="(item, index) in processNodeShowDtoList" :key="index" :title="item.name">
                        <view slot="desc">
                            <!-- 发起人 -->
                            <view v-if="item.type == 0" style="margin-bottom: 20rpx;">
                                <view v-for="(items, indexs) in item.userVoList" :key="indexs">
                                    <view class="user_name">{{ items.name }}</view>
                                    <view class="user_time">{{ items.showTime }}</view>
                                </view>
                            </view>
                            <!-- 审批人 -->
                            <view v-else-if="item.type == 1 && item.approveDescList.length" style="margin-bottom: 20rpx;">
                                <view class="placeholder_box">{{ item.placeholder }}</view>
                                <view v-for="(items, indexs) in item.userVoList" :key="indexs" class="user_box">
                                    <view>
                                        <view class="user_name">{{ items.name }}</view>
                                        <view class="user_time">{{ items.showTime }}</view>
                                    </view>
                                    <view v-if="item.approveDescList" class="user_stats">{{ item.approveDescList[0].descTypeStr }}</view>
                                </view>
                                <view v-if="item.approveDescList">
                                    <view style="color: #4dacb1; font-size: 24rpx;">{{ item.approveDescList[0].desc.title }}</view>
                                    <view style="font-size: 24rpx;">{{ item.approveDescList[0].desc.content }}</view>
                                </view>
                            </view>
                            <!-- 条件分支 -->
                            <view v-else-if="item.type == 4 && item.branch.length > 0" style="margin-bottom: 20rpx;">
                                <view class="placeholder_box">[{{ item.branch[0].placeholder }}]</view>
                            </view>
                            <!-- 条件分支分支出来的 -->
                            <view v-else-if="item.type == 1" style="margin-bottom: 20rpx;">
                                <view class="placeholder_box">[{{ item.placeholder }}]</view>
                                <view class="leader" style="display: flex;">
                                    <view class="user_name" v-for="(items, indexs) in item.userVoList" :key="indexs">{{ items.name }}</view>
                                </view>
                            </view>
                            <view v-else-if="item.type == 2" style="margin-bottom: 20rpx;">
                                <view class="placeholder_box">[{{ item.placeholder }}]</view>
                                <view class="leader" style="display: flex;">
                                    <view class="user_name" v-for="(items, indexs) in item.userVoList" :key="indexs">{{ items.name }}</view>
                                </view>
                            </view>
                        </view>
                    </u-steps-item>
                </u-steps>
            </view>
        </view>
        <!-- 底部 -->
        <view class="bottom-box">
            <!-- <template v-if="detailsData.orderStatus != '1003' && detailsData.orderStatus != '1004' && detailsData.orderStatus != '1005'">
                <view class="row-box" @click="editHandle()">
                    <svg-icon svgPath="/static/svg/icon-bianji.svg" color="#0C1019" size="16px" />
                    <text>编辑订单</text>
                </view>
                <view @click="delHandle()" class="row-box">
                    <u-icon name="trash" color="#0C1019" size="22"></u-icon>
                    <text>作废订单</text>
                </view>
            </template> -->
            <view @click="revokeHandle()" v-if="detailsData.orderStatus == '1003'" class="row-box">
                <svg-icon svgPath="/static/svg/icon-sh.svg" color="#0C1019" size="16px" />
                <text>撤销审核</text>
            </view>
        </view>
    </view>
</template>

<script>
import { convertToDict } from '@/common/utils'
import Payment from './components/payment.vue'
export default {
    components: {
        Payment
    },

    data() {
        return {
            title: '',
            detailsData: {},
            list: [
                { name: '未签到完成', type: 1 },
                { name: '已签到完成', type: 2 }
            ],
            show: false,
            id: null,
            current: 1,
            tabList: [
                { label: '订单信息', type: 1 },
                { label: '回款信息', type: 2 },
                { label: '审批进度', type: 3 }
            ],
            tabIndex: 1,
            goodsList: [],
            giftList: [],
            flowId: null,
            processInstanceId: null,
            paramMap: {},
            active: 1,
            processNodeShowDtoList: [],
            branchList: [],
            processInstanceBizCode: ''
        }
    },
    onLoad(options) {

        this.bus_source = JSON.parse(uni.getStorageSync('bus_source'))
        this.bus_source_status = convertToDict(this.bus_source)

        // 付款类型
        this.bus_pay_type = JSON.parse(uni.getStorageSync('bus_pay_type'))
        this.bus_pay_type_list = convertToDict(this.bus_pay_type)

        this.bus_pay_status = convertToDict(JSON.parse(uni.getStorageSync('bus_pay_status')))
        this.bus_order_status = convertToDict(JSON.parse(uni.getStorageSync('bus_order_status')))

        // 付款类型
        this.bus_client = JSON.parse(uni.getStorageSync('bus_client_type'))
        this.bus_client_type = convertToDict(this.bus_client)

        if (options.id) {
            this.id = options.id
            this.getDetails()
            this.getRovalList()
        }
    },
    onReachBottom() {
        console.log('上拉加载onReachBottom')
        if (this.tabIndex == 2) {
            this.$refs.payment.loadmore()
        }
    },
    methods: {
        getDetails() {
            this.$http.get('/app/order/number/' + this.id, {}).then(res => {
                if (res.code == 200) {
                    this.title = res.data.customerName
                    this.detailsData = res.data
                    
                    this.goodsList = res.data.commodityList.filter(item => {
                        return item.type == '0'
                    })
                    this.giftList = res.data.commodityList.filter(item => {
                        return item.type == '1'
                    })
					this.goodsList.forEach(s=>{
						s.factoryPrice = (s.caseUnitPrice/s.caseQuantity).toFixed(2);
					})
                    this.detailsData.paymentUrl = this.detailsData.paymentUrl? this.detailsData.paymentUrl.split(',') : []
                    // paymentUrl

                    // 回款列表
                    this.$refs.payment.getData(res.data.orderNumber)

                    this.goExamine(res.data.processNumber)
                } else {
                    uni.$u.toast(res.msg)
                }
            })
        },
        getRovalList() {
            this.$http.get('/app/approval_log/list', { pageNum: 1, pageSize: 100, orderNumber: this.detailsData.orderNumber }).then(res => {
                if (res.code == 200) {
                    // this.title = res.data.customerName
                    // this.detailsData = res.data
                    // this.title = res.data.customerName
                } else {
                    uni.$u.toast(res.msg)
                }
            })
        },
        openPopup() {
            this.$refs.popup.open()
        },
        editHandle() {
            uni.redirectTo({
                url: '/pages/order/addOrder?type=edit&id=' + this.detailsData.id
            });
        },
        delHandle() {
            let that = this
            uni.showModal({
                title: '提示',
                content: '确定要删除该条记录吗？',
                success: function (res) {
                    if (res.confirm) {
                        that.$http.del('/app/order/' + that.detailsData.id, {}).then(res => {
                            console.log(res)
                            if (res.data.code == 200) {
                                uni.showToast({ title: '删除成功', duration: 1000 });
                                setTimeout(() => {
                                    uni.navigateBack()
                                }, 1000)
                            } else {
                                uni.$u.toast(res.msg)
                            }
                        })
                    } else if (res.cancel) {
                        console.log('用户点击取消');
                    }
                }
            });
        },
        previewImg (index) {
            uni.previewImage({
                current: index,
                urls: this.detailsData.paymentUrl
            })
        },
        revokeHandle() {
            let that = this
            uni.showModal({
                title: '提示',
                content: '确定要撤销审批吗？',
                success: function (res) {
                    if (res.confirm) {
                        that.$http.post('/flyflow-api/process-instance/stopProcessInstance', { flowId: that.flowId, processInstanceId: that.processInstanceId }, false).then(res => {
                            console.log(res)
                            if (res.data.ok == true) {
                                uni.$u.toast('撤销成功!')
                                that.getDetails()
                            } 
                        })
                    } else if (res.cancel) {
                        console.log('用户点击取消');
                    }
                }
            });
        },
        
        getColor(state) {
            let color;
                switch (state) {
                case '1001':
                case '1006':
                    color = 'rgba(255, 0, 28, 1)';
                    break;
                case '1002':
                    color = 'rgba(0, 186, 173, 1)';
                    break;
                case '1003':
                case '1004':
                case '1005':
                case '1009':
                    color = 'rgba(255, 141, 26, 1)';
                    break;
                case '1010':
                case '1011':
                case '1012':
                    color = 'rgba(42, 130, 228, 1)';
                    break;
                default:
                    color = 'rgba(255, 0, 28, 1)';
            }
            return color;
        },
        clickTabs(item) {
            this.tabIndex = item.type;
        },
        getStatus() {
            if(this.detailsData.orderStatus == '1003' || this.detailsData.orderStatus == '1004' || this.detailsData.orderStatus == '1005') {
                return true
            }
        },
        backHandle() {
            uni.navigateBack()
        },
        // 审批进度 -  1.获取审批信息
        goExamine(processNumber) {
            this.$http.get('/app/neworder/my/findProcess', { processId: processNumber }).then(res => {
                console.log(res)
				if (res.code == 200) {
                    this.flowId = res.data.flowId
                    this.processInstanceId = res.data.processInstanceId
                    this.getFormDetail()
                    this.getQueryHeaderShow()
				} 
			})
        },
        // 审批进度 - 审批头
        getQueryHeaderShow() {
            this.$http.post('/flyflow-api/base/queryHeaderShow', { flowId: this.flowId, processInstanceId: this.processInstanceId }, false).then(res => {
				if (res.data.ok == true) {
                    console.log(res.data.data)
                    this.processInstanceBizCode = res.data.data.processInstanceBizCode
				} 
			})
        },
        // 审批进度 -  2.获取审批信息
        getFormDetail() {
            this.$http.post('/flyflow-api/form/getFormDetail', { flowId: this.flowId, processInstanceId: this.processInstanceId }, false).then(res => {
                // console.log(res)
				if (res.data.ok == true) {
                    let formList = res.data.data.formList
                    let paramMap = {}
                    formList.forEach(element => {
                        paramMap[element.id] = element.props.value
                    });
                    this.paramMap = paramMap
                    this.formatStartNodeShow()
				} 
			})
        },
        // 审批进度 -  3.页面需要的数据
        formatStartNodeShow() {
            this.$http.post('/flyflow-api/base/formatStartNodeShow', 
                {   flowId: this.flowId,
                    processInstanceId: this.processInstanceId,
                    paramMap: this.paramMap
                }, false).then(res => {
				if (res.data.ok == true) {
                    this.processNodeShowDtoList = []
                    res.data.data.processNodeShowDtoList.forEach((item, index) => {
                        if(item.type == 4 && item.branch.length) {
                            // 将branch[0].children的元素插入到当前索引位置之后
                            const children = item.branch[0].children;
                            this.processNodeShowDtoList.push(item)
                            if (children && children.length) {
                                this.processNodeShowDtoList.push(...children)
                            }
                        } else {
                            this.processNodeShowDtoList.push(item)
                        }
                    })
                    this.processNodeShowDtoList.forEach(item => {
                        if(item.type == 1 && item.hasOwnProperty('approveDescList') && item.approveDescList.length > 0) {
                            let desc = JSON.parse(item.approveDescList[0].desc)
                            item.approveDescList[0].desc = desc
                        } else if (item.type == 1 && !item.hasOwnProperty('approveDescList')) {
                            item['approveDescList'] = []
                        }
                    })    
                    console.log(this.processNodeShowDtoList)
                } 
			})
        }
    }
}
</script>

<style lang="scss" scoped>
/deep/.uni-navbar__header-btns-right {
    width: 64px !important;
}

.taskDetails {
    padding-bottom: 150rpx;
}

.taskDetails-content {
    margin: 20rpx 0;

    .customer-info {
        border-radius: 24rpx;
        background: rgba(255, 255, 255, 1);
        padding: 32rpx 0;

        .customer-row-title {
            padding: 0 32rpx;
            text-align: center;
            // 超出隐藏
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .item {
            padding: 0 10rpx;
            flex: 1;
            // margin-bottom: 32rpx;
            // 超出隐藏
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;

            >:nth-child(1) {
                font-size: 28rpx;
                font-weight: 400;
                color: rgba(103, 117, 133, 1);
                margin-bottom: 8rpx;
            }

            >:nth-child(2) {
                font-size: 30rpx;
                font-weight: 500;
                color: rgba(12, 16, 25, 1);
                // 超出隐藏
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
    }

    .item-title {
        padding: 48rpx 32rpx 20rpx 32rpx;
        font-size: 32rpx;
        font-weight: 500;
        color: rgba(12, 16, 25, 1);
    }
}

.bottom-box {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 12rpx rgba(0, 0, 0, 0.1);
    > view {
        padding: 16rpx 0
    }

    .row-box {
        padding: 32rpx 0;
        display: flex;
        align-items: center;
        flex: 1;
        justify-content: center;
    }

    .column-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    text {
        font-size: 28rpx;
        font-weight: 500;
        color: rgba(12, 16, 25, 1);
        margin-left: 8rpx;
    }

}
.order_info {
    padding: 32rpx 28rpx;
    background: rgba(255, 255, 255, 1);
    margin-bottom: 32rpx;
}
.order_info_top {
    display: flex;

    .order_info_right {
        .salesman {
            margin-top: 8rpx;
            font-size: 32rpx;
            font-weight: 500;
            color: rgba(12, 16, 25, 1);
            // width: 100%;
            // 超出隐藏
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
}
.order_info_left {
    width: 0;
    flex: 1;
    >view {
        margin-bottom: 20rpx;
        font-size: 28rpx;
        display: flex;
        // 超出显示省略号
        // overflow: hidden;
        // text-overflow: ellipsis;
        // white-space: nowrap;
        >text:nth-child(1) {
            color: rgba(103, 117, 133, 1);
            display: inline-block;
            // margin-right: 20rpx;
            width: 170rpx;
        }
        >text:nth-child(2) {
            flex: 1;
            font-weight: 500;
            color: rgba(12, 16, 25, 1);
        }
    }
}
.order_info_remark {
    >view {
        display: flex;
        font-size: 28rpx;
        // 超出显示省略号
        // overflow: hidden;
        // text-overflow: ellipsis;
        // white-space: nowrap;
        >text:nth-child(1) {
            color: rgba(103, 117, 133, 1);
            display: inline-block;
            width: 170rpx;
        }
        >text:nth-child(2) {
            flex: 1;
            font-weight: 500;
            color: rgba(12, 16, 25, 1);
        }
    }
}
.order_goods {
    padding: 32rpx 28rpx;
    background: rgba(255, 255, 255, 1);
    .goods_item {
        border-radius: 12rpx;
        background: #F7F8FA;
        padding: 28rpx;
        .order_info_left {
            > view {
                > text:nth-child(1) {
                    width: 140rpx;
                }
            }
        }
    }
}

.popup-box {
    padding: 32rpx 0;

    .popup-header {
        display: flex;
        justify-content: center;
        margin-bottom: 32rpx;
    }

    .icon-box {
        border-radius: 16rpx;
        background: #F2F2F2;
        width: 100rpx;
        height: 100rpx;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .grid-text {
        margin-top: 24rpx;
        margin-bottom: 32rpx;
        font-size: 28rpx;
    }
}

.tab {
    display: flex;
    // justify-content: space-between;
    padding: 28rpx 32rpx;
    margin: 24rpx 0 24rpx 0;
    background: rgba(255, 255, 255, 1);
    font-size: 28rpx;
    font-weight: 400;
    color: rgba(103, 117, 133, 1);
    >view {
        margin-right: 80rpx;
    }
    .active {
        color: rgba(77, 172, 177, 1);
    }
}
.title_box {
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;
    > view:nth-child(1) {
        width: 8rpx;
        height: 32rpx;
        border-radius: 40rpx;
        background: rgba(77, 172, 177, 1);
        margin-right: 8rpx;
    }
    > view:nth-child(2) {
        font-size: 32rpx;
        font-weight: 500;
        color: rgba(12, 16, 25, 1);
    }
}
.user_name {
    font-size: 28rpx;
    font-weight: 500;
    color: rgba(12, 16, 25, 1);
}
.user_time {
    font-size: 24rpx;
    font-weight: 400;
    color: rgba(103, 117, 133, 1);
}
.placeholder_box {
    font-size: 24rpx;
    font-weight: 400;
    color: rgba(103, 117, 133, 1);
}
.user_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    > view :nth-child(1) {
        flex: 1;
    }
}
.user_stats {
    height: 36rpx;
    line-height: 36rpx;
    padding: 0 16rpx;
    border-radius: 4rpx;
    background: rgba(0, 186, 173, 0.1);
    font-size: 20rpx;
    font-weight: 400;
    color: rgba(77, 172, 177, 1);
}
.leader {
    display: flex;
    flex-wrap: wrap;
    > view {
        margin-right: 20rpx;
    }
}
.steps_number {
    padding-bottom: 20rpx; font-size: 28rpx; color: #677585;
    border-bottom: 1rpx solid rgba(103, 117, 133, 0.1); margin-bottom: 20rpx;
}
/deep/.u-text__value {
    font-size: 28rpx !important;
    color: #0c1019 !important;
    font-weight: 500 !important;
}
</style>